import { useState } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";

type Feature = {
	badge: string;
	title: string;
	description: string;
	gradient: string;
};

const features: Feature[] = [
	{
		badge: "React 组件",
		title: "组件化 + Hooks",
		description:
			"通过函数组件和 Hooks 构建模块化 UI，状态更新时自动触发渲染，帮助你快速实验交互逻辑。",
		gradient: "from-indigo-500 via-sky-500 to-cyan-500",
	},
	{
		badge: "Tailwind 原子类",
		title: "设计自由度极高",
		description:
			"使用 Tailwind 原子类随写随见，内置暗色主题、渐变、玻璃态等设计元素，像写组件一样写样式。",
		gradient: "from-violet-500 via-fuchsia-500 to-rose-500",
	},
	{
		badge: "快速起步",
		title: "一键启动开发体验",
		description:
			"内置开发服务器与构建配置，结合现代打包工具，让你专注业务，无需重复搭建脚手架。",
		gradient: "from-emerald-500 via-lime-500 to-amber-500",
	},
];

const codeTabs = {
	hooks: {
		label: "React Hooks",
		highlight: "体验状态驱动 UI",
		code: `function CounterDemo() {
  const [count, setCount] = useState(0);

  return (
    <button
      className="rounded-full bg-sky-500 px-4 py-2 text-white transition hover:bg-sky-400"
      onClick={() => setCount((c) => c + 1)}
    >
      点击了 {count} 次
    </button>
  );
}`,
	},
	tailwind: {
		label: "Tailwind 布局",
		highlight: "原子化样式组合",
		code: `<section className="grid gap-6 md:grid-cols-2">
  {features.map((feature) => (
    <article
      key={feature.title}
      className="rounded-2xl bg-slate-900/60 p-6 ring-1 ring-white/10"
    >
      <h3 className="text-lg font-semibold text-white">
        {feature.title}
      </h3>
      <p className="mt-2 text-sm text-slate-300">
        {feature.description}
      </p>
    </article>
  ))}
</section>`,
	},
	tooling: {
		label: "开发命令",
		highlight: "一条命令完成启动",
		code: `# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 打包生产环境
npm run build`,
	},
} as const;

type CodeTabKey = keyof typeof codeTabs;

const FeatureCard = ({ badge, title, description, gradient }: Feature) => (
	<article className="group relative overflow-hidden rounded-2xl bg-slate-900/60 p-6 ring-1 ring-white/10 transition-transform duration-300 hover:-translate-y-1.5 hover:ring-white/20">
		<div
			className={`absolute inset-x-6 -top-px h-px bg-gradient-to-r ${gradient} opacity-60 transition-opacity duration-300 group-hover:opacity-100`}
			aria-hidden="true"
		/>
		<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-200">
			{badge}
		</span>
		<h3 className="mt-5 text-xl font-semibold text-white">{title}</h3>
		<p className="mt-3 text-sm leading-relaxed text-slate-300">{description}</p>
	</article>
);

const DemoPreview = () => {
	const [theme, setTheme] = useState<"sunset" | "aurora">("sunset");
	const [count, setCount] = useState(1);

	const themeGradient = {
		sunset: "from-orange-500 via-pink-500 to-purple-500",
		aurora: "from-emerald-400 via-cyan-400 to-sky-500",
	} as const;

	return (
		<div className="flex flex-col gap-4 rounded-3xl bg-slate-900/50 p-6 ring-1 ring-white/10">
			<div className="flex items-center justify-between">
				<div>
					<p className="text-sm font-semibold text-sky-400">Live Demo</p>
					<h3 className="mt-1 text-xl font-semibold text-white">React 状态 + Tailwind 样式</h3>
				</div>
				<span className="rounded-full bg-sky-500/20 px-3 py-1 text-xs font-medium text-sky-200">
					状态即时刷新
				</span>
			</div>
			<div
				className={`rounded-2xl bg-gradient-to-r ${themeGradient[theme]} p-[1px] transition-all duration-500`}
			>
				<div className="rounded-2xl bg-slate-950/90 p-6">
					<p className="text-xs uppercase tracking-[0.2em] text-slate-400">component preview</p>
					<div className="mt-4 flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
						<div>
							<p className="text-sm text-slate-300">当前计数</p>
							<p className="mt-1 text-4xl font-bold text-white">{count}</p>
						</div>
						<div className="flex items-center gap-3">
							<button
								className="rounded-full border border-white/10 bg-white/5 px-3 py-2 text-sm text-slate-200 transition hover:border-white/40 hover:text-white"
								onClick={() => setCount((value) => Math.max(0, value - 1))}
								type="button"
							>
								减少
							</button>
							<button
								className="rounded-full bg-white px-4 py-2 text-sm font-semibold text-slate-900 transition hover:bg-slate-100"
								onClick={() => setCount((value) => value + 1)}
								type="button"
							>
								增加
							</button>
						</div>
					</div>
					<div className="mt-6 flex flex-wrap gap-2">
						<button
							className={`rounded-full border px-4 py-1.5 text-xs font-semibold uppercase tracking-wide transition ${
								theme === "sunset"
									? "border-pink-400/60 bg-pink-500/10 text-white"
									: "border-white/10 text-slate-300 hover:border-pink-400/50 hover:text-white"
							}`}
							onClick={() => setTheme("sunset")}
							type="button"
						>
							夕阳渐变
						</button>
						<button
							className={`rounded-full border px-4 py-1.5 text-xs font-semibold uppercase tracking-wide transition ${
								theme === "aurora"
									? "border-emerald-300/60 bg-emerald-400/10 text-white"
									: "border-white/10 text-slate-300 hover:border-emerald-300/50 hover:text-white"
							}`}
							onClick={() => setTheme("aurora")}
							type="button"
						>
							极光渐变
						</button>
					</div>
				</div>
			</div>
			<p className="text-xs leading-relaxed text-slate-400">
				以上示例可在组件中直接运行，Tailwind 提供的原子类帮助我们快速叠加出渐变、圆角与玻璃态效果。
			</p>
		</div>
	);
};

const App = () => {
	const [activeTab, setActiveTab] = useState<CodeTabKey>("hooks");
	const tabKeys = Object.keys(codeTabs) as CodeTabKey[];

	return (
		<div className="relative min-h-screen overflow-hidden bg-slate-950 text-slate-100">
			<div className="pointer-events-none absolute inset-0">
				<div className="absolute -left-16 top-24 h-72 w-72 rounded-full bg-indigo-500/15 blur-3xl" />
				<div className="absolute bottom-10 right-10 h-72 w-72 rounded-full bg-emerald-500/10 blur-3xl" />
			</div>
			<header className="relative z-10">
				<div className="container mx-auto px-6 pt-20 pb-16">
					<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-slate-200">
						React + Tailwind 模板
					</span>
					<h1 className="mt-6 max-w-3xl text-4xl font-bold leading-tight text-white sm:text-5xl">
						用现代前端栈快速搭建拥有设计感的 React 应用
					</h1>
					<p className="mt-6 max-w-2xl text-lg leading-relaxed text-slate-300">
						这个脚手架开箱即用：React
						负责组件化和交互逻辑，TailwindCSS 提供快速迭代的设计语言。通过预设的开发脚本与配置，几分钟内即可进入业务开发。
					</p>
					<div className="mt-10 flex flex-wrap gap-4">
						<a
							className="inline-flex items-center justify-center gap-2 rounded-full bg-sky-500 px-6 py-3 text-sm font-semibold text-white transition hover:bg-sky-400"
							href="https://react.dev"
							rel="noreferrer"
							target="_blank"
						>
							了解 React 最佳实践
						</a>
						<a
							className="inline-flex items-center justify-center gap-2 rounded-full border border-white/15 px-6 py-3 text-sm font-semibold text-slate-200 transition hover:border-white/40 hover:text-white"
							href="https://tailwindcss.com"
							rel="noreferrer"
							target="_blank"
						>
							探索 Tailwind 设计语言
						</a>
					</div>
				</div>
			</header>
			<main className="relative z-10">
				<section className="border-t border-white/5 bg-slate-950/80">
					<div className="container mx-auto grid gap-6 px-6 py-16 md:grid-cols-3">
						{features.map((feature) => (
							<FeatureCard key={feature.title} {...feature} />
						))}
					</div>
				</section>
				<section className="border-t border-white/5 bg-slate-950/60">
					<div className="container mx-auto grid gap-8 px-6 py-16 lg:grid-cols-[1.1fr_0.9fr]">
						<DemoPreview />
						<div className="flex h-full flex-col rounded-3xl bg-slate-900/60 p-6 ring-1 ring-white/10">
							<div className="flex items-center justify-between gap-4">
								<div>
									<p className="text-sm font-medium text-sky-400">代码片段</p>
									<h3 className="mt-1 text-xl font-semibold text-white">{codeTabs[activeTab].label}</h3>
									<p className="mt-1 text-sm text-slate-300">{codeTabs[activeTab].highlight}</p>
								</div>
								<div className="flex gap-2">
									{tabKeys.map((key) => (
										<button
											key={key}
											className={`rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition ${
												activeTab === key
													? "border-sky-400 bg-sky-400/15 text-white shadow-[0_0_20px_rgba(56,189,248,0.35)]"
													: "border-white/10 text-slate-300 hover:border-sky-400/60 hover:text-white"
											}`}
											onClick={() => setActiveTab(key)}
											type="button"
										>
											{codeTabs[key].label}
										</button>
									))}
								</div>
							</div>
							<pre className="mt-6 flex-1 overflow-auto rounded-2xl bg-slate-950/80 p-6 text-sm leading-relaxed text-slate-200 shadow-inner shadow-black/40">
								<code>{codeTabs[activeTab].code}</code>
							</pre>
						</div>
					</div>
				</section>
			</main>
			<footer className="relative z-10 border-t border-white/5 bg-slate-950/90">
				<div className="container mx-auto flex flex-col gap-4 px-6 py-10 text-sm text-slate-400 sm:flex-row sm:items-center sm:justify-between">
					<p>准备好了吗？运行 <code className="rounded bg-white/10 px-2 py-1 text-xs text-slate-200">npm run dev</code> 即刻开启热刷新体验。</p>
					<p className="text-xs uppercase tracking-[0.25em] text-white/40">Crafted with React &amp; TailwindCSS</p>
				</div>
			</footer>
		</div>
	);
};

const root = document.getElementById("root");
if (root) {
	createRoot(root).render(<App />);
}
